<template>
	<view class="container">
		<view class="tabs">
			<button @click="activeTab = 'unpaid'" :class="{ active: activeTab === 'unpaid' }">未支付</button>
			<button @click="activeTab = 'paid'" :class="{ active: activeTab === 'paid' }">已支付</button>
			<button @click="activeTab = 'pending'" :class="{ active: activeTab === 'pending' }">待支付</button>
		</view>
  
	  
		<!-- 列表 -->
		<view class="student" v-for="(student, index) in students" :key="index" >
			<view>
				<text>班级: {{ student.className }}</text>
				<text>支付金额: {{ student.payPrice }}</text>
				<text>总价: {{ student.price }}</text>
				<!-- 添加支付按钮或其他操作 -->
				<view v-if="student.status === 'unpaid'">
					<button @click="handlePay(student)">支付</button>
				</view>
				<view v-if="student.status === 'paid'">
					<button @click="handleDetail(student)">查看详情</button>
				</view>
				<view v-if="student.status === 'pending'">
					<button @click="handleCancel(student)">取消订单</button>
				</view>
				
			</view>
		</view>
  
	  
	</view>
  </template>
  
  <script>
  export default {
	data() {
	  return {
		// 当前选中的标签页
		// unpaid - 未支付, paid - 已支付, pending - 待支付
		// 初始状态为 unpaid
		activeTab: 'unpaid',
		students: [
		  { className: '国庆大促', payPrice: '2000', status: 'paid', price: '5000' },
		  { className: '国庆大促', payPrice: '2000', status: 'unpaid', price: '5000' },
		  { className: '国庆大促', payPrice: '2000', status: 'pending', price: '5000' },
		  { className: '国庆大促', payPrice: '2000', status: 'paid', price: '5000' },
		  { className: '国庆大促', payPrice: '2000', status: 'paid', price: '5000' },
		  // ...更多学生数据
		]
	  };
	},
	methods: {
	  // 处理支付操作
	  handlePay(student) {
		// 这里可以添加支付逻辑，例如调用支付接口等
		console.log(`支付订单: ${student.className}`);
		// 更新订单状态为已支付
		student.status = 'paid';
	  },
	  // 处理查看详情操作
	  handleDetail(student) {
		console.log(`查看订单详情: ${student.className}`);
		// 这里可以添加查看详情的逻辑，例如跳转到详情页面等
	  },
	  // 处理取消订单操作
	  handleCancel(student) {
		// 这里可以添加取消订单的逻辑，例如调用取消订单接口等
		console.log(`取消订单: ${student.className}`);
		// 更新订单状态为已取消
		student.status = 'cancelled';
	  }
	}
  };
  </script>
  
  <style scoped>
  .container {
	padding: 20px;
  }
  
  .tabs {
	display: flex;
	justify-content: center;
  }
  
  .tab-button {
	margin-right: .5rem;
	background-color: #007aff;
	color: #fff;
	border: none;
	border-radius: .25rem;
	cursor: pointer;
  }
  
  .tab-button.active {
	background-color: #0062cc;
  }
  
  .list-item {
	padding: .5rem .75rem;
	background-color: #f8f8f8;
	border-radius: .25rem;
	margin-bottom: .5rem;
  }
  
  .list-item.paid {
	background-color: #d4edda;
  }
  
  .list-item.unpaid {
	background-color: #f8d7da;
  }
  
  .list-item.pending {
	background-color: #fff3cd;
  }
  </style>
  